<div class="row justify-content-center">
    <div class="col-8">
        <div *ngIf="employee">
            <h2><span>Employee</span> {{ employee.id }}</h2>

            <hr>

            <jhi-alert-error></jhi-alert-error>

            <dl class="row-md jh-entity-details">
                <dt><span ngbTooltip="The firstname attribute.">First Name</span></dt>
                <dd>
                    <span>{{ employee.firstName }}</span>
                </dd>
                <dt><span>Last Name</span></dt>
                <dd>
                    <span>{{ employee.lastName }}</span>
                </dd>
                <dt><span>Email</span></dt>
                <dd>
                    <span>{{ employee.email }}</span>
                </dd>
                <dt><span>Phone Number</span></dt>
                <dd>
                    <span>{{ employee.phoneNumber }}</span>
                </dd>
                <dt><span>Hire Date</span></dt>
                <dd>
                    <span>{{ employee.hireDate }}</span>
                </dd>
                <dt><span>Salary</span></dt>
                <dd>
                    <span>{{ employee.salary }}</span>
                </dd>
                <dt><span>Commission Pct</span></dt>
                <dd>
                    <span>{{ employee.commissionPct }}</span>
                </dd>
                <dt><span>Manager</span></dt>
                <dd>
                    <div *ngIf="employee.managerId">
                        <a [routerLink]="['/employee', employee.managerId, 'view']">{{ employee.managerId }}</a>
                    </div>
                </dd>
                <dt><span>Department</span></dt>
                <dd>
                    <div *ngIf="employee.departmentId">
                        <a [routerLink]="['/department', employee.departmentId, 'view']">{{ employee.departmentId }}</a>
                    </div>
                </dd>
            </dl>

            <button type="submit"
                    (click)="previousState()"
                    class="btn btn-info">
                <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span>Back</span>
            </button>

            <button type="button"
                    [routerLink]="['/employee', employee.id, 'edit']"
                    class="btn btn-primary">
                <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span>Edit</span>
            </button>
        </div>
    </div>
</div>
